import React from "react";
import {Picker, Platform, Text, TouchableOpacity} from "react-native";
import chjStyle from "../../../CustomStyle";
import {Actions} from "react-native-router-flux";

var selectionItem = {
    backgroundColor: 'rgba(255, 255, 255, 255)',
    width: chjStyle.getActualSizeInHorizontal(750),
    height: chjStyle.getActualSizeInVertical(128),
    borderBottomWidth: 1 / chjStyle.pi,
    borderBottomColor: '#dddddd'
};

export default class SingleSelectionTextItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isValid: true,
        };
        if (!this.props.object.value || this.props.object.value.length === 0) {
            this.props.object.value = this.props.optionArray[0].name;
        }
    }

    render() {
        if (Platform.OS === 'android') {
            return (
                <TouchableOpacity
                    style={[chjStyle.textItem]}
                    onPress={this.props.onClickedListener}>
                    <Text style={{
                        position: 'absolute',
                        color: '#303030',
                        textAlign: 'left',
                        backgroundColor: 'rgba(0, 0, 0, 0)',
                        fontSize: chjStyle.getActualFontSize(30),
                        top: chjStyle.getActualSizeInVertical(40),
                        left: chjStyle.getActualSizeInHorizontal(40),
                        width: chjStyle.getActualSizeInHorizontal(375),
                    }}>{this.props.object.name}</Text>
                    <Picker
                        style={{
                            position: 'absolute',
                            color: this.state.isValid ? '#303030' : '#e01010',
                            right: chjStyle.getActualSizeInHorizontal(30),
                            width: chjStyle.getActualSizeInHorizontal(300),
                            height: chjStyle.getActualSizeInVertical(128)
                        }}
                        ref='picker'
                        mode={'dialog'} prompt={this.props.object.name} onValueChange={this.onSelectItem.bind(this)}
                        selectedValue={this.props.object.value}>
                        {
                            this.props.optionArray.map((item, i) => this.renderExpenseItem(item, i))
                        }
                    </Picker>
                </TouchableOpacity>
            );
        } else {
            console.log('SingleSelectionTextItem render');
            return (
                <TouchableOpacity
                    style={chjStyle.textItem}
                    onPress={() => this.showSelection()}>
                    <Text style={{
                        position: 'absolute',
                        color: '#303030',
                        textAlign: 'left',
                        backgroundColor: 'rgba(0, 0, 0, 0)',
                        fontSize: chjStyle.getActualFontSize(30),
                        top: chjStyle.getActualSizeInVertical(40),
                        left: chjStyle.getActualSizeInHorizontal(40),
                        width: chjStyle.getActualSizeInHorizontal(375),
                    }}>{this.props.object.name}</Text>

                    <Text style={{
                        position: 'absolute',
                        color: '#303030',
                        textAlign: 'right',
                        backgroundColor: 'rgba(0, 0, 0, 0)',
                        fontSize: chjStyle.getActualFontSize(30),
                        top: chjStyle.getActualSizeInVertical(40),
                        right: chjStyle.getActualSizeInHorizontal(30),
                        width: chjStyle.getActualSizeInHorizontal(375),
                    }}>{this.props.object.value}</Text>

                </TouchableOpacity>
            );
        }
    }


    showSelection() {
        Actions.dialog({
            array: this.props.optionArray,
            select: data => {
                this.onSelectItem(data.name)
            },
        });
    }

    renderExpenseItem(item, i) {
        return <Picker.Item label={item.name} value={item.name}/>;
    }

    onSelectItem(value) {
        this.props.object.value = value;
        if (this.props.onSelectedListener) {
            this.props.onSelectedListener(value);
        }
        this.setState({});
    }
}
